<template>
    <div class="navbar-container">
        <!-- <router-link :to="{path:'/'}" class="navbar-logo">
            <img :src="$config.head.logo" width='37'>
        </router-link> -->
        <i class='iconfont icon-plus-shiftdown' style='float: right;margin: 0 15px;color: white;'
            v-if='!$pcShow&&!showSilde' @click='fnshowSilde()'></i>
        <i class='iconfont icon-close' style='float: right;margin: 0 15px;color: white;' v-if='!$pcShow&&showSilde'
            @click='fnshowSilde()'></i>
        <!-- 用户信息开始 -->
        <div class="userInfo">
            <div style='float: right;color: white;font-size: 21px;cursor:pointer;' @click='fnrandomSrc()'>
                <el-tooltip class="item" effect="light" content="随机背景" placement="bottom">
                    <i class='el-icon-refresh' :style='isAnimate?"animation:rotate 1s infinite;":""'></i>
                </el-tooltip>
            </div>

            <div v-if="isLogin" style='float: right;color: white;font-size: 21px;cursor:pointer;margin-right: 23px;'
                @click='fnShare()'>
                <el-tooltip class="item" effect="light" content="分享您的导航" placement="bottom">
                    <i class='el-icon-share'></i>
                </el-tooltip>
            </div>
            <div v-if="!isLogin" style='width: 155px;'>
                <router-link :to="{name: 'login' , query: {  redirect:$route.fullPath  }}" class="login"
                    :style="$pcShow?'':'margin: 0;'">云端同步</router-link>
            </div>
            <!-- 下拉菜单 -->
            <el-dropdown v-if="isLogin" class="avatar">
                <span class="el-dropdown-link avatar" style="color: white;font-size: 19px;margin-right: 24px;">
                    {{user.name}}
                    <!-- <img :src="user.headImg" alt style='border-radius: 50%;width: 3rem;height: 3rem;object-fit: cover;'> -->
                </span>
                <el-dropdown-menu slot="dropdown" class="dropdown">
                    <el-dropdown-item divided @click.native="fnLogout()">
                        <i class="iconfont icon-tuichu icon" style="color:#eb5055;padding-right: 15px;"></i>注销用户
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <!-- 用户信息结束 -->
        <!-- 菜单栏开始 -->
    </div>
</template>


<script>
import { mapGetters, mapActions } from "vuex";
import axios from "axios";

export default {
    name: "Header",
    components: {},
    data() {
        return {
            showSilde: false,
            isAnimate: false
        };
    },
    created() {
        console.log(this.$route.fullPath)
        this.checkLogin()
    },
    methods: {
        ...mapActions(["getGrxx", "logout", "getPermissions", "checkLogin"]),
        fnShare() {
            this.$alert(`<div>下面您的分享链接,赶紧告诉你的朋友吧~</div><a target="_blank" style="color:#3d8ffb;" href="http://${window.location.host}/#/share?name=${JSON.parse(localStorage.getItem('user')).name}">http://${window.location.host}/#/share?name=${JSON.parse(localStorage.getItem('user')).name}</a>`, '分享链接', {
                dangerouslyUseHTMLString: true
            });
        },
        fnrandomSrc() {
            this.isAnimate = true
            console.log(this.isAnimate)
            setTimeout(() => {
                this.isAnimate = false
            }, 1000)
            this.$emit('fnrandomSrc')
        },
        fnLogout() {
            console.log("click");
            this.logout(); //注销登录
        },
        fnshowSilde() {
            if (this.showSilde) {
                this.showSilde = false
            } else {
                this.showSilde = true
            }

            console.log(this.showSilde)
            this.$forceUpdate()
        }
    },
    computed: {
        ...mapGetters(["isLogin", "user"])
    }
};
</script>

<style lang="less">
@import "../../assets/common.less";
@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}
.userInfo {
    float: right;
    // margin-right: 3rem;
    .writeBtn {
        background: linear-gradient(45deg, rgb(241, 81, 86), #f3d922);
        display: flex;
        height: 2rem;
        justify-content: center;
        align-items: center;
        color: WHITE;
        border-radius: 22px;
        padding: 0 0.4rem;
        margin-left: 1rem;
        cursor: pointer;
        transition: all 0.3s;
        i {
            margin-right: 3px;
        }
        &:hover {
            box-shadow: 0 0 10px 2px #ffc9cb;
            transition: all 0.3s;
        }
        &:hover i {
            animation: write 2s infinite;
            transition: all 0.3s;
        }
    }
    .login {
        color: white;
        margin: 0 25px;
        padding: 6px 8px;
        font-size: 16px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        cursor: pointer;
        cursor: pointer;
        &:hover {
            background: #151515;
            transition: all 0.3s;
        }
    }
    .avatar {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        img {
            height: 35px;
            cursor: pointer;
        }
        .dropdown {
            .icon {
                color: #eb5055;
            }
        }
    }
    .register {
        color: #eb5055;
        cursor: pointer;
        &:hover {
            color: #ff365b;
            transition: all 0.3s;
        }
    }
}
.navbar-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 60px;
    margin: 0 auto;
}
.navbar-logo {
    font-size: 22px;
    line-height: 22px;
    position: absolute;
    top: 37%;
    left: 0;
    display: block;
    width: auto;
    max-width: 50%;
    height: 22px;
    margin-top: -10px;
    margin-left: 25px;
    text-decoration: none;
    cursor: pointer;
}
.navbar-logo img {
    width: auto;
    height: 37px;
    outline: 0;
}
.navbar-menu {
    z-index: 10;
    display: inline-block;
    width: auto;
    padding-right: 5px;
    float: right;
}
.navbar-menu a {
    font-size: 14px;
    padding: 0 15px;
    transition: all 0.3s;
}
a:active,
a:focus,
a:hover {
    color: #eb5055;
    outline: 0;
    transition: all 0.3s;
}
.navbar-search {
    line-height: 70px;
    display: inline-block;
    width: 20px;
    padding: 0 40px 0 0;
    cursor: pointer;
}
.icon-search {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 2px 0 0 3px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    color: #313131;
    border: solid 2px currentColor;
    border-radius: 50%;
}
.icon-search:before {
    position: absolute;
    top: 11px;
    left: 3px;
    width: 2px;
    height: 4px;
    content: "";
    background-color: currentColor;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #e6e6e6;
    color: #f55b60;
}
@keyframes write {
    0% {
        transform: rotateZ(-7deg);
    }
    10% {
        transform: rotateZ(7deg);
    }
    20% {
        transform: rotateZ(-4deg);
    }
    30% {
        transform: rotateZ(3deg);
    }
    40% {
        transform: rotateZ(-8deg);
    }
    50% {
        transform: rotateZ(8deg);
    }
    60% {
        transform: rotateZ(-6deg);
    }
    70% {
        transform: rotateZ(6deg);
    }
    80% {
        transform: rotateZ(-5deg);
    }
    90% {
        transform: rotateZ(3deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
</style>